<script setup>

import {onMounted, ref} from 'vue'
import HomePanel from './HomePanel.vue'
import {reqFindNewAPI} from '@/api/home'

onMounted(() => {
  // 挂载请求新鲜好物列表
  getFindNewList()
})

// 存储新鲜好物列表
const findNewList = ref([])
const getFindNewList = async () => {
  const res = await reqFindNewAPI()
  findNewList.value = res.data.result
}

</script>

<template>
  <div class="home-new">
    <!-- 复用组件 HomePanel，利用组件通信向子组件传递参数title和sub-title -->
    <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
      <ul>
        <li v-for="item in findNewList" :key="item.id">
          <router-link :to="`/detail/${item.id}`">
            <img :src="item.picture" alt="商品图片"/>
            <p class="name" :title="item.name">{{ item.name }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </router-link>
        </li>
      </ul>
    </HomePanel>
  </div>
</template>


<style scoped lang="scss">
.home-new {
  display: flex;
  //width: 100%;
  //height: 520px;
  margin-top: 25px;

  ul {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: nowrap;

    li {
      width: 300px;
      height: 405px;
      padding: 0  10px;
      text-align: center;
      background-color: #f0f9f4;

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }

      a {
        img {
          width: 300px;
          height: 300px;
        }

        .name {
          width: 280px;
          white-space: nowrap; // 防止文本换行
          overflow: hidden; // 隐藏溢出的文本
          text-overflow: ellipsis; // 显示省略号
          font-size: 20px;
          margin-top: 12px;
          color: #7c7c7c;
        }

        .price {
          font-size: 20px;
          margin-top: 10px;
          color: #f60;
          font-weight: bold;
        }
      }
    }
  }
}

</style>